<template>
  <div class="content mar_10">
    <div class="h_l_img">
      <div class="img">
        <img :src="require('@/assets/images/l_img.jpg')" width="188" height="188" />
      </div>
      <div class="pri_bg">
        <span class="price fl">￥53.00</span>
        <span class="fr">16R</span>
      </div>
    </div>
    <div class="hot_pro">
      <div id="featureContainer">
        <div id="feature">
          <div id="block">
            <div id="botton-scroll">
              <ul class="featureUL">
                <li class="featureBox" v-for="(product) in hotProducts" :key="product.id">
                  <div class="box">
                    <div class="h_icon">
                      <img :src="require('@/assets/images/hot.png')" width="50" height="50" />
                    </div>
                    <div class="imgbg">
                      <a href="#"><img :src="'http://192.168.144.183:9090/easybuyImages/' + product.fileName"
                          width="160" height="136" @click.prevent="toProductDetialShow(product.id)" /></a>
                    </div>
                    <div class="name">
                      <a href="#">
                        <h2>{{ product.name }}</h2>
                        {{ product.description }}
                      </a>
                    </div>
                    <div class="price">
                      <font>￥<span>{{ product.price }}</span></font> &nbsp; 26R
                    </div>
                  </div>
                </li>

              </ul>
            </div>
          </div>
          <a class="h_prev" href="#" @click.prevent="changePage('last')">Previous</a>
          <a class="h_next" href="#" @click.prevent="changePage('next')">Next</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopProducts',
  data() {
    return {
      pageInfo: null,
      hotProducts: [],
    }
  },
  methods: {
    changePage(opr) {
      let pageNum = 1
      if (opr == 'last') {
        pageNum = this.pageInfo.prePage === 0 ? 1 : this.pageInfo.prePage
      } else {
        pageNum = this.pageInfo.nextPage === 0 ? this.pageInfo.pages : this.pageInfo.nextPage
      }
      this.selectProductByPage(pageNum, 4)
    },
    selectProductByPage(pageNum, pageSize) {
      this.$axios({
        url: 'selectProductByPage',
        method: 'post',
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          salesSort: false
        },
        headers: {
          'content-type': 'application/json'
        }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.pageInfo = rs.data.pageInfo
          this.hotProducts = rs.data.pageInfo.list
        }
      })
    },
    toProductDetialShow(id) {
      this.$router.push({ path: '/productDetail', query: { id: id } })
    }
  },
  mounted() {
    this.selectProductByPage(1, 4)
  }
}
</script>

<style></style>